<template>
  <div class="chy-drawer">
    <el-drawer v-model="visiblex" :title="title" :size="width" :with-header="withHeader" :append-to-body="appendToBody"
      :before-close="beforeClose" @opened="opened" @closed="closed">
      <slot slot="title" name="title"></slot>
      <slot name="bar"></slot>
      <div class="custom-drawer-scroll__body">
        <slot></slot>
      </div>
      <template #footer v-if="withFooter">
        <div style="flex: auto">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, computed, watch } from 'vue'
// props
interface Props {
  modelValue: boolean,
  title?: string,
  width?: string,
  withHeader?: boolean,
  withFooter?: boolean,
  appendToBody?: boolean,
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '',
  width: '720px',
  withHeader: true,
  withFooter: true,
  appendToBody: true,
})
// emit
const emit = defineEmits(['update:modelValue', 'opened', 'closed', 'confirm', 'cancel'])
// computed
const visiblex = computed({
  get() {
    return props.modelValue
  },
  set(newValue: boolean) {
    emit('update:modelValue', newValue)
  }
})
// watch
watch(() => props.modelValue, (val) => {
})
// methods
const closed = () => {
  emit('closed')
}

const opened = () => {
  emit('opened')
}
const beforeClose = (done: () => void) => {
  done()
}
const handleConfirm = () => {
  emit('confirm')
}
const handleCancel = () => {
  visiblex.value = false
  emit('cancel')
}

</script>

<style lang='scss' scoped>
.chy-drawer {}
</style>